<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>020.11.2.影子dom.html</title>
    <style>
    </style>
</head>
<body>
        <p id="pdiv">影子dom</p>


        <div> 
            <p slot="foo">Foo</p> 
             <p slot="bar">Bar</p> 
            </div>


</body>
<script>

document.querySelector('div') 
 .attachShadow({ mode: 'open' }) 
 .innerHTML = ` 
<slot name="bar"></slot> 
 <slot name="foo"></slot> 
 `;

    /*
for (let color of ['red', 'green', 'blue']) { 
    console.log('Print color : ' , color );
 const div = document.getElementById('pdiv')
 const shadowDOM = div.attachShadow({ mode: 'open' }); 
 document.body.appendChild(div); 
 shadowDOM.innerHTML = ` 
 <slot></slot>
 <span> say hi </span> 
 <p>Make me ${color}</p> 
 <style> 
 p { 
 color: ${color}; 
 } 
 </style> 
 `; 
}
*/





</script>
</html>